<html>
    <head>
    <title>联系人列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <!-- 引入 Bootstrap -->
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->
    </head>
    <body>
        <form name="query-form" action="http://127.0.0.1:5000/doQueryPhone" method="POST">
          <div class="form-group">
            <input input type="text" name="username" value="{{username}}" size="10" placeholder="请输入联系人姓名" style="width:120px"></input>
            <button type="submit" class="btn btn-default">搜索</button>
          </div>
        </form>
        <form name="add-form" action="http://127.0.0.1:5000/addPhone">
          <button type="submit" class="btn btn-default">新建联系人</button>
        </form>

   
        <table class="table">
           <caption>用户列表</caption>
          <thead>
            <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>手机</th>
              <th>邮箱</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            {% for user in lists %}
            <tr>
                <td style="font-size:14;color:red">{{user['name']}}</td>
                <td>{{user['sex']}}</td>
                <td>{{user['phone']}}</td>
                <td>{{user['email']}}</td>
                <td><a href="http://127.0.0.1:5000/modifyPhone?id={{user['id']}}">修改</a><a href="http://127.0.0.1:5000/deletePhone?id={{user['id']}}">删除</a></td>
               
            </tr>
            {% endfor %}
          </tbody>
        </table>
    </body>
</html>